<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
</head>
<body>
<div id="app">
    <!--双向绑定,若未点击则为空,点击了会选择对应的value值-->
    <el-select v-model="value" placeholder="请选择">
        <!--label是显示给用户看的-->
        <!--value是选中后的值-->
        <el-option
                v-for="item in options"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</div>
</body>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        },
        methods:{

        }
    })
</script>
</html>